<template>
  <!-- 购置税 -->
  <table-index :table="table" @loadData="loadData">
    <template #time="{ record }">
      <div v-if="record.startTime || record.endTime">
        <div v-if="record.startTime">{{ record.startTime }}</div>
        <div v-if="record.endTime">{{ record.endTime }}</div>
      </div>
      <div v-else> - </div>
    </template>

    <template #purchaseTaxPayAmount="{ record }">
      {{ record.purchaseTaxPayAmount }}
      <template v-if="record.feeStatusName"> ({{ record.feeStatusName }}) </template>
    </template>
  </table-index>

  <InstallmentModal
    title="查看分期"
    hide-cancel
    :ok-button-props="{ type: 'secondary' }"
    ok-text="关闭"
    v-model:visible="installmentVisible"
    :params="params"
    @ok="handleInstallmentOk"
  />

  <InstallmentPlanModal
    title="修改或设置分期"
    v-model:visible="installmentPlanVisible"
    :params="params"
    @close="handleInstallmentPlanClose"
  />
</template>

<script setup lang="ts">
  import { useFetchTableDataApiNoPage, useTable } from '@/hooks/table'
  import { inject, onMounted, reactive, ref } from 'vue'
  import { purchaseDetailAPI } from '@/api/dashboard/account'
  import InstallmentModal from '../installment-modal.vue'
  import InstallmentPlanModal from '../installment-plan-modal.vue'
  import { getPurchaseTaxConfig } from '@/api/dashboard/vehicleAccounting'

  const modalStatus = inject<any>('modalStatus')
  const params = ref<any>({})

  const installmentVisible = ref(false)
  const installmentPlanVisible = ref(false)

  const table = useTable({
    pagination: false,
    columns: [
      {
        title: '车牌号',
        dataIndex: 'licenseNo',
      },
      {
        title: '所选时间',
        dataIndex: 'time',
        slotName: 'time',
      },
      {
        title: '总额',
        dataIndex: 'totalAmount',
        unit: '元',
      },
      {
        title: '应付金额',
        dataIndex: 'purchaseTaxPayAmount',
        slotName: 'purchaseTaxPayAmount',
        unit: '元',
      },
      {
        title: '应结日期',
        dataIndex: 'dueDate',
      },
    ],
    buttons: [
      {
        label: '查看分期',
        show: () => params.value.ifOpen == 1,
        method: () => {
          installmentVisible.value = true
        },
      },
      {
        type: 'primary',
        label: '修改或设置分期',
        method: () => {
          installmentPlanVisible.value = true
        },
      },
    ],
  })

  const queryParam = reactive<any>({
    carId: modalStatus.queryParams.carId,
    startTime: modalStatus.queryParams.startTime,
    endTime: modalStatus.queryParams.endTime,
  })

  const loadData = useFetchTableDataApiNoPage(table, queryParam, purchaseDetailAPI)

  // 获取分期内容
  const getInstallmentContent = () => {
    getPurchaseTaxConfig({
      carId: modalStatus.queryParams.carId,
    }).then((res: any) => {
      const { result } = res
      params.value = {
        carId: result.carId,
        licenseNo: result.licenseNo,
        totalAmount: result.totalAmount,
        ifOpen: result.ifOpen,
        receivableNum: result.receivableNum,
        firstDate: result.firstDate,
      }
    })
  }

  const handleInstallmentOk = () => {
    installmentVisible.value = false
  }

  const handleInstallmentPlanClose = () => {
    loadData()
    getInstallmentContent()
  }

  onMounted(() => {
    loadData()
    getInstallmentContent()
  })
</script>

<style scoped lang="less"></style>
